<template>
  <div id="life-channel-wrap">
    <!-- 一个配置项 -->
    <template v-if="lifeTabList.length === 1">
      <p class="one-tab">{{ lifeTabList[0].name }}</p>
    </template>
    <!-- 二个配置项 -->
    <template v-if="lifeTabList.length === 2">
      <two-tab
        :curTab="lifeCurTab"
        :tabList="lifeTabList"
        @selectLifeTab="handleChangeLifeTab"
      />
    </template>
    <!-- 三个配置项 -->
    <template v-else-if="lifeTabList.length === 3">
      <three-tab
        :curTab="lifeCurTab"
        :tabList="lifeTabList"
        @selectLifeTab="handleChangeLifeTab"
      />
    </template>
    <!-- 四个及以上配置项 -->
    <template v-else-if="lifeTabList.length >= 4">
      <multi-tab
        :curTab="lifeCurTab"
        :tabList="lifeTabList"
        @selectLifeTab="handleChangeLifeTab"
      />
    </template>
    <div class="history-record-wrap">
      <div class="life-input-wrap">
        <input
          ref="inputRef"
          class="life-input"
          v-model="singleCache.value"
          :type="singleCache.inputType"
          :maxlength="singleCache.maxlength"
          :placeholder="singleCache.placeholder"
          pattern="[0-9]*"
          @input="handleKeyUp"
          @focus="handleFocus"
          @blur="handleBlur"
        />
        <i
          v-if="singleCache.value"
          class="clear-icon"
          @click="handleClearInput"
        ></i>
      </div>
      <div
        class="history-list-wrap"
        v-if="isShowHistory && historyList.length > 0"
      >
        <ul class="history-list">
          <li
            v-for="(v, index) in historyList"
            :key="index"
            @click="handleHistoryClick(v)"
          >
            {{ v | formatMobile }}
          </li>
        </ul>
        <div class="clear-history" @click="handleClearHistory">
          清空历史记录
        </div>
      </div>
    </div>
    <ul class="recharge-list">
      <template v-if="!isExpand && lifeProdList.length > 5">
        <li
          class="recharge-item"
          v-for="(v, index) in 5"
          :key="index"
          :class="
            singleCache.value.length === 0
              ? 'unable'
              : selectIndex === index
              ? 'active'
              : ''
          "
          @click="handleItemClick(v, index)"
        >
          <div class="price-wrap">
            <div class="tag-price">10元</div>
            <div class="discount-price">优惠价 9.97</div>
          </div>
          <div class="profit"><span>省赚 0.5</span></div>
          <div class="sellout" v-if="v.sellout">售罄</div>
        </li>
        <li
          class="recharge-item more"
          :class="{ unable: singleCache.value.length === 0 }"
          @click="handleExpand"
        >
          更多充值金额
        </li>
      </template>
      <template v-else-if="isExpand">
        <li
          class="recharge-item"
          v-for="(v, index) in lifeProdList"
          :key="index"
          :class="
            singleCache.value.length === 0
              ? 'unable'
              : selectIndex === index
              ? 'active'
              : ''
          "
          @click="handleItemClick(v, index)"
        >
          <div class="price-wrap">
            <div class="tag-price">10元</div>
            <div class="discount-price">优惠价 9.97</div>
          </div>
          <div class="profit"><span>省赚 0.5</span></div>
          <div class="sellout" v-if="v.sellout">售罄</div>
        </li>
      </template>
    </ul>
    <payList ref="payListRef" />
    <confirmPopup
      ref="confirmPopupRef"
      :showCancelText="false"
      ok-text-color="#FF3037"
      @onOk="handleDialogOk"
    />
    <rechargePopup ref="rechargePopupRef" @onOk="handleRecharge" />
  </div>
</template>

<script>
import multiTab from './multiTab.vue';
import twoTab from './twoTab.vue';
import threeTab from './threeTab.vue';
import payList from './payList.vue';
import confirmPopup from './confirmPopup.vue';
import rechargePopup from './rechargePopup.vue';

// 验证是否是手机号
const checkPhone = phone => {
  let bool = true;
  if (!/^1[3456789]\d{9}$/.test(phone)) {
    bool = false;
  }
  return bool;
};

export default {
  name: 'lifeChannel',
  props: {
    lifeTabList: {
      type: Array,
      default: () => []
    }
  },
  components: {
    multiTab,
    twoTab,
    threeTab,
    payList,
    confirmPopup,
    rechargePopup
  },
  data() {
    return {
      isExpand: false, // 是否展开
      isShowHistory: false, // 是否展示历史记录
      lifeCurTab: 0, // 当前选择的tab
      lifeProdList: [1, 2, 3, 4, 5, 6, 7, 8],
      selectIndex: -1, // 充值选中项
      historyList: ['13111111111', '13611111111', '14711111111'],
      cache: {
        1: {
          placeholder: '请输入手机号码',
          maxlength: '13',
          inputType: 'tel',
          value: '',
          selectIndex: -1
        }
      }
    };
  },
  computed: {
    curTab() {
      return this.lifeTabList[this.lifeCurTab];
    },
    singleCache() {
      const { id } = this.lifeTabList[this.lifeCurTab] || {};
      return this.cache[id];
    }
  },
  filters: {
    formatMobile(phone) {
      let ret = '';
      if (phone) {
        ret = phone.replace(/^(.{3})(.*)(.{4})$/, '$1 $2 $3');
      }
      return ret;
    }
  },
  methods: {
    handleDialogOk() {},
    // 缓存
    addToCache() {
      const { id } = this.lifeTabList[this.lifeCurTab] || {};
      this.cache[id] = {
        placeholder: '请输入手机号码',
        maxlength: '13',
        inputType: 'tel',
        value: ''
      };
    },
    // 键盘抬起
    handleKeyUp(e) {
      let val = this.singleCache.value;
      console.log(e);
      //如果是删除按键，则什么都不做
      if (e.keyCode === 8) {
        this.singleCache.value = val;
        return;
      }

      let len = val.length;
      if (len === 3 || len === 8) {
        val += ' ';
        this.singleCache.value = val;
      }
      val = val.replace(/\s+/g, '');
      if (val.length === 11 && this.singleCache.inputType === 'tel') {
        this.$refs.inputRef.blur();
        const bool = checkPhone(val);
        if (!bool) {
          this.$toast('手机号码输入有误，请重新输入');
        }
      }
      // 过滤历史记录
      this.historyList = this.historyList.filter(item => item.startsWith(val));
    },
    // 获得焦点
    handleFocus() {
      this.isShowHistory = true;
      this.scrollToTop();
    },
    // 失去焦点
    handleBlur() {
      const scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      window.scroll(0, scrollTop);
    },
    scrollToTop() {
      const scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      const lifeChannelDOM = document.getElementById('life-channel-wrap');
      let top = lifeChannelDOM.getBoundingClientRect().top;
      console.log('lifeChannelDOM', top + scrollTop);
      if (top <= 5) {
        return;
      }
      window.scrollTo(0, top + scrollTop);
    },
    // 更多金额点击
    handleExpand() {
      this.isExpand = true;
    },
    // tab选项卡选择
    handleChangeLifeTab(index) {
      this.lifeCurTab = index;
      this.addToCache();
      this.isExpand = false;
      this.isShowHistory = false;
    },
    // 清空输入框
    handleClearInput() {
      this.singleCache.value = '';
      this.isShowHistory = true;
    },
    // 历史记录选择
    handleHistoryClick(item) {
      this.singleCache.value = item;
      this.isShowHistory = false;
    },
    // 清空历史记录
    handleClearHistory() {
      this.historyList = [];
    },
    // 充值金额选择
    handleItemClick(v, index) {
      if (!this.singleCache.value) return;
      this.selectIndex = index;
      this.$refs.rechargePopupRef.showDialog = true;
    },
    // 立即充值
    handleRecharge() {
      this.$refs.payListRef.isShow = true;
    }
  },
  mounted() {
    console.log('mounted===');
    this.addToCache();
  },
  destroyed() {
    console.log('destroyed===');
  }
};
</script>

<style lang="scss" scoped>
#life-channel-wrap {
  width: 100%;
  background: #fff;
  border-radius: 0.12rem;
  padding-bottom: 0.2rem;

  .one-tab {
    font-size: 0.28rem;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: #333;
    line-height: 0.4rem;
    padding-left: 0.24rem;
    padding-top: 0.4rem;
  }

  .history-record-wrap {
    position: relative;
  }

  .history-list-wrap {
    position: absolute;
    top: 0.98rem;
    left: 0;
    right: 0;
    width: 100%;
    background-color: #fff;
    padding: 0 0.2rem;
    z-index: 1004;
    border-radius: 0 0 0.04rem 0.04rem;
    box-sizing: border-box;
  }

  .history-list {
    padding-top: 0.24rem;
    li {
      font-size: 0.32rem;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: #333;
      padding: 0.26rem 0;
      border-bottom: 1px solid #f0f0f0;
    }
  }

  .clear-history {
    font-size: 0.24rem;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: #333;
    line-height: 0.34rem;
    padding: 0.2rem 0 0.22rem;
    text-align: center;
  }
}

.life-input-wrap {
  display: flex;
  align-items: center;
  padding-top: 0.24rem;
  padding-bottom: 0.34rem;
  position: relative;

  .life-input {
    width: 6.5rem;
    height: 0.74rem;
    font-size: 0.52rem;
    padding-left: 0.2rem;
    line-height: 0.74rem;
    color: #333;
    font-family: PingFangSC-Regular;
    background-color: transparent;
    -webkit-appearance: none;
    outline: none;

    &::-webkit-input-placeholder {
      color: #ccc;
    }
  }

  .clear-icon {
    position: absolute;
    right: 0.2rem;
    width: 0.36rem;
    height: 0.36rem;
    display: block;
    font-weight: normal;
    background: url('../../../assets/images/activity/icon-clear.png') no-repeat;
    background-size: 100% 100%;
  }
}

.recharge-list {
  padding: 0 0.06rem;
  display: flex;
  flex-wrap: wrap;

  .recharge-item {
    width: 2.08rem;
    height: 1.48rem;
    border: 1px solid #f5a7a7;
    border-radius: 0.04rem;
    margin: 0 0.12rem 0.2rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative;

    .price-wrap {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .sellout {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 54px;
      height: 54px;
      border-radius: 50%;
      color: #fff;
      background: rgba(51, 51, 51, 1);
      opacity: 0.7;
      font-size: 14px;
      font-family: PingFangSC-Regular;
    }

    .tag-price {
      font-size: 18px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      text-align: center;
      line-height: 25px;
    }

    .discount-price {
      font-size: 12px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      text-align: center;
      line-height: 17px;
    }

    .profit {
      width: 100%;
      height: 20px;
      font-size: 11px;
      border-radius: 0 0 2px 2px;
      font-family: PingFangSC-Regular;
      background: rgba(255, 243, 243, 1);
      color: rgba(230, 37, 37, 1);
      text-align: center;
      line-height: 20px;
      span {
        transform: scale(0.83);
        display: inline-block;
      }
    }

    &.active {
      background: rgba(230, 37, 37, 0.05);
    }

    &.unable {
      border: 1px solid #ccc;

      .tag-price {
        font-size: 18px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: #ccc;
        text-align: center;
        line-height: 25px;
      }

      .discount-price {
        font-size: 12px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: #ccc;
        text-align: center;
        line-height: 17px;
      }

      .profit {
        width: 100%;
        height: 20px;
        font-size: 11px;
        border-radius: 0 0 2px 2px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        background: #f5f5f5;
        color: #333;
        text-align: center;
        line-height: 20px;
        span {
          transform: scale(0.83);
          display: inline-block;
        }
      }
    }

    &.more {
      font-size: 14px;
      font-family: PingFangSC-Regular;
      color: rgba(51, 51, 51, 1);
      line-height: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
